<template>
  <div>
    <van-search placeholder="请输入搜索内容" @change="change" @search="list" @clear="list" shape="round" use-action-slot clearable autofocus>
      <div slot="action" @click="list">搜索</div>
    </van-search>
    <van-grid column-num="2" gutter="10" clickable>
      <van-grid-item icon="diamond-o" @click="toList(dockerServer)" :text="dockerServer.url" :key="dockerServer" v-for="dockerServer in dockerServerList"></van-grid-item>
    </van-grid>
    <van-cell-group>
      <van-button type="primary" @click="toCreate" size="large">创建</van-button>
    </van-cell-group>
    <van-toast id="van-toast"></van-toast>
  </div>
</template>

<script>
  import tabbarAPI from '@/api/tabbarAPI'
  import dockerStore from '@/pages/docker/dockerStore'

  export default {
    name: 'docker',
    data () {
      return {
        dockerServerList: [],
        dockerServerName: '',
        dockerServerVersion: '',
        searchContent: ''
      }
    },
    onShow () {
      wx.startPullDownRefresh()
    },
    onPullDownRefresh () {
      var that = this
      that.list()
    },
    methods: {
      change (e) {
        var that = this
        that.searchContent = e.mp.detail
      },
      list () {
        var that = this
        var user = wx.getStorageSync('user')
        var param = {
          userId: user.userId,
          dockerServerName: that.dockerServerName,
          dockerServerVersion: that.dockerServerVersion,
          searchContent: that.searchContent
        }
        tabbarAPI.list(param).then(result => {
          if (result.data === undefined) {
            that.dockerServerList = []
          } else {
            that.dockerServerList = result.data
          }
        })
        wx.stopPullDownRefresh()
      },
      toList (dockerServer) {
        dockerStore.commit('setDockerServer', dockerServer)
        wx.navigateTo({
          url: '/pages/docker/list'
        })
      },
      toCreate () {
        wx.navigateTo({
          url: '/pages/docker/create'
        })
      }
    }
  }
</script>

<style scoped>
</style>
